<!DOCTYPE HTML>
<html>
<head>
    @include('common.header')
    <title>添加商品</title>
    <style type="text/css">
        .pic{
            margin-right:5px;margin-bottom:5px;
            width:100px;height:120px;
            float: left;
        }
        .pic img{
            width: 100px;
            height: 100px;
        }
        .del-pic{
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
        .add{
            margin-bottom: 10px;
            margin-left: 88px;
        }
    </style>
</head>
<body>
<div class="page-container">
    <form class="form form-horizontal" id="form-goods-add">
        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl">
                <span>基本信息</span>
                <span>详细信息</span>
                <span>商品属性</span>
                <span>商品相册</span>
            </div>
            <div class="tabCon">
                <input type="hidden" name="id" value="{{$info['id'] or null}}">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        商品名称：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" name="title" placeholder="" value="{{$info['title'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        商品货号：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" name="item_no" placeholder="" value="{{$info['item_no'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        商品图片：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="file" accept="image/*" name="upload_logo" id="upload_logo" value="">
                        @if(isset($info['img']) && $info['img'])
                            <div><img id="logo" width="90" height="auto" src="{{$info['img']}}"></div>
                        @endif
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        分类：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <select name="cat_id" class="select-box">
                            <option value="">--请选择分类--</option>
                            @foreach($cats as $cat)
                                <option value="{{$cat['id']}}" <?php if(isset($info['cat_id']) && $info['cat_id']==$cat['id']): ?>selected="selected"<?php endif; ?>>{{str_repeat('&nbsp;',$cat['depth']*4)}}{{$cat['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        品牌：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <select name="brand_id" id="brand_id" class="select-box">
                            <option value="">--请选择品牌--</option>
                        </select>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        简单描述：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea id="description" name="description" placeholder="" class="textarea">{{$info['description'] or null}}</textarea>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        关键词：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" name="keywords" placeholder="如有多个用空格隔开" value="{{$info['keywords'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        服务项：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" name="services" placeholder="如有多个用空格隔开" value="{{$info['services'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        出售价格：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" name="sell_price" placeholder="" value="{{$info['sell_price'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        市场价格：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" name="market_price" placeholder="" value="{{$info['market_price'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        成本价格：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" name="cost_price" placeholder="" value="{{$info['cost_price'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        库存：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" name="stock" placeholder="" value="{{$info['stock'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        购买后获得积分：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" name="score" placeholder="" value="{{$info['score'] or null}}" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        其他选项：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="checkbox" style="width:20px;" name="is_new" title="新品" <?php if(isset($info['is_new']) && $info['is_new']): ?>checked<?php endif; ?>>新品&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" style="width:20px;" name="is_hot" title="热销" <?php if(isset($info['is_hot']) && $info['is_hot']): ?>checked<?php endif; ?>>热销&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" style="width:20px;" name="is_recommend" title="推荐" <?php if(isset($info['is_recommend']) && $info['is_recommend']): ?>checked<?php endif; ?>>推荐&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="checkbox" style="width:20px;" name="is_onshelf" title="上架" <?php if(isset($info['is_onshelf']) && $info['is_onshelf']): ?>checked<?php endif; ?>>上架&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">详细信息： </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <!-- 加载编辑器的容器 -->
                        <textarea id="container" name="detail" type="text/plain">{{$info['detail'] or null}}</textarea>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">关联属性：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <table id="attrs-table" class="layui-table">
                            <tr>
                                <th>属性名称</th>
                                <th>属性值</th>
                                <th>操作</th>
                            </tr>
                            @if(isset($info['attr_values']))
                                @foreach($info['attr_values'] as $v)
                                    <tr>
                                        <td>{{$v['attr_name']}}</td>
                                        <td><input type="text" name="attr_value" value="{{$v['attr_value']}}" class="layui-input"></td>
                                        <td><a href="javascript:void(0)" id="attr-delete">删除</a></td>
                                    </tr>
                                @endforeach
                            @endif
                        </table>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"></label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="layui-btn" id="add_attr">添加属性</div>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>
                        商品相册：
                    </label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="file" id="upload_img" name="album[]" multiple accept="image/png,image/gif,image/jpg,image/jpeg"></input>
                        <div id="gallery" style="width:100%;height:auto;">
                            @if(isset($info['album']))
                                @foreach(explode(',',$info['album']) as $v)
                                    <div class='pic'><img src='{{$v}}'><a href='javascript:void(0)' class='del-pic'>删除</a></div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <div id="goods_save" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe632;</i> 保存</div>
                <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>

@include('common.footer')

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{{asset('hui-admin/lib/My97DatePicker/4.8/WdatePicker.js')}}"></script>
<script type="text/javascript" src="{{asset('hui-admin/lib/jquery.validation/1.14.0/jquery.validate.js')}}"></script>
<script type="text/javascript" src="{{asset('hui-admin/lib/jquery.validation/1.14.0/validate-methods.js')}}"></script>
<script type="text/javascript" src="{{asset('hui-admin/lib/jquery.validation/1.14.0/messages_zh.js')}}"></script>
<script type="text/javascript" src="{{asset('hui-admin/lib/ueditor/1.4.3/ueditor.config.js')}}"></script>
<script type="text/javascript" src="{{asset('hui-admin/lib/ueditor/1.4.3/ueditor.all.min.js')}}"> </script>
<script type="text/javascript" src="{{asset('hui-admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js')}}"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container',{
        initialFrameHeight: 200,
        initialFrameWidth: 815
    });

    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });

    $(function(){
        $("#tab-system").Huitab({
            index:0
        });
    });

    //选择品牌分类
    $('select[name=cat_id]').on('change', function () {
        _cat_id = $(this).val();
        if(isNull(_cat_id)){
            $("select[name=brand_id]").empty();//删除所有选项
            $("select[name=brand_id]").append("<option value=''>--请选择品牌--</option>");//添加空选项
        }else{
            $.ajax({
                url: "/Brand/getBrandListByGoodsCatId",
                type: 'POST',
                dataType:"json",
                data: {"cat_id":_cat_id},
                success : function(data) {
                    if (data.code == 1) {
                        $("select[name=brand_id]").empty();//删除所有选项
                        if(data.list.length > 0){
                            for(var i=0;i<data.list.length;i++){
                                $("select[name=brand_id]").append("<option value='"+data.list[i].id+"'>"+data.list[i].name+"</option>");
                            }
                        }else{
                            $("select[name=brand_id]").append("<option value=''>--请选择品牌--</option>");//添加空选项
                        }
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        }
    });

    //添加属性
    $("#add_attr").click(function () {
        _cat_id = $('select[name=cat_id]').val();

        if(isNull(_cat_id)){
            layer.msg('请先在【基本信息】里面选择分类');
            return false;
        }
        $.ajax({
            url: "/GoodsCategoryAttr/getAttrsByCatId",
            type: 'POST',
            dataType:"json",
            data: {"cat_id":_cat_id},
            success : function(data) {
                if (data.code == 1) {
                    if(data.attrs.length > 0){
                        _html = '';
                        for(var i=0; i<data.attrs.length; i++){
                            _html += "<option value='"+data.attrs[i].name+"'>"+data.attrs[i].name+"</option>";
                        }
                        _index = layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0, //不显示关闭按钮
                            anim: 3,
                            shadeClose: true, //开启遮罩关闭
                            area: '224px',
                            content: "<select name='attr_name' style='margin:10px;width:200px;background:#fafdfe;" +
                            "    height:28px;  \n" +
                            "    line-height:28px;  \n" +
                            "    border:1px solid #9bc0dd;  \n" +
                            "    -moz-border-radius:2px;  \n" +
                            "    -webkit-border-radius:2px;  \n" +
                            "    border-radius:2px;  \n" +
                            "'>"+_html+"</select><div class='add layui-btn layui-btn-sm'>确定</div>"
                        });
                    }else{
                        layer.msg('没有可以添加的属性');
                    }
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    });

    var uploading = false;
    $("#upload_img").on("change", function(){
        if(uploading){
            alert("文件正在上传中，请稍候");
            return false;
        }
        $.ajax({
            url: "/Goods/uploadImg",
            type: 'POST',
            cache: false,
            data: new FormData($('#form-goods-add')[0]),
            processData: false,
            contentType: false,
            dataType:"json",
            beforeSend: function(){
                uploading = true;
            },
            success : function(data) {
                if (data.code == 1) {
                    for(var i=0;i<data.img_url.length;i++){
                        $("#gallery").append("<div class='pic'><img src='"+data.img_url[i]+"'><a href='javascript:void(0)' class='del-pic'>删除</a></div>");
                    }
                } else {
                    layer.msg(data.msg);
                }
                uploading = false;
            }
        });
    });

    var uploading2 = false;
    $("#upload_logo").on("change", function(){
        if(uploading2){
            alert("文件正在上传中，请稍候");
            return false;
        }
        $.ajax({
            url: "/Goods/uploadLogo",
            type: 'POST',
            cache: false,
            data: new FormData($('#form-goods-add')[0]),
            processData: false,
            contentType: false,
            dataType:"json",
            beforeSend: function(){
                uploading2 = true;
            },
            success : function(data) {
                if (data.code == 1) {
                    if($("#logo").length > 0) {
                        //元素存在时执行的代码
                        $("#logo").attr("src", data.img_url);
                    }else{
                        $("#upload_logo").after("<div><img id='logo' width='90' height='90' src='"+data.img_url+"'></div>");
                    }
                } else {
                    showError(data.msg);
                }
                uploading2 = false;
            }
        });
    });

    $(function () {
        $(document).on('click','.del-pic',function () {
            $(this).parent().remove();
        });
       //添加属性
        $(document).on('click','.add',function () {
            _attr_name = $.trim($("select[name=attr_name]").val());
            if(!isNull(_attr_name)){
                $("#attrs-table").append("" +
                    "<tr>" +
                        "<td>"+_attr_name+"</td>" +
                        "<td><input type='text' name='attr_value' class='layui-input'></td>" +
                        "<td><a href=\"javascript:void(0)\" id=\"attr-delete\">删除</a></td>" +
                    "</tr>");
            }
            layer.close(layer.index);//关闭最上面的那个层
        });

        //删除属性
        $(document).on('click','#attr-delete',function () {
            $(this).parent().parent().remove();
        });

        //brand_id 预处理
        <?php if(isset($info['cat_id'])): ?>
        $.ajax({
            url: "/Brand/getBrandListByGoodsCatId",
            type: 'POST',
            dataType:"json",
            data: {"cat_id":{{$info['cat_id']}}},
            success : function(data) {
                if (data.code == 1) {
                    $("select[name=brand_id]").empty();//删除所有选项
                    if(data.list.length > 0){
                        for(var i=0;i<data.list.length;i++){
                            if(data.list[i].id == {{$info['brand_id']}})
                                $("select[name=brand_id]").append("<option value='"+data.list[i].id+"' selected='selected'>"+data.list[i].name+"</option>");
                            else
                                $("select[name=brand_id]").append("<option value='"+data.list[i].id+"'>"+data.list[i].name+"</option>");
                        }
                    }else{
                        $("select[name=brand_id]").append("<option value=''>--请选择品牌--</option>");//添加空选项
                    }
                } else {
                    layer.msg(data.msg);
                }
            }
        });
        <?php endif; ?>
    });

    $("#goods_save").click(function () {
        _id = $('input[name=id]').val();
        _title = $('input[name=title]').val();
        _item_no = $('input[name=item_no]').val();
        _img = $('#logo').attr('src');
        _cat_id = $('select[name=cat_id]').val();
        _brand_id = $('#brand_id').val();
        _description = $('#description').val();
        _keywords = $('input[name=keywords]').val();
        _services = $('input[name=services]').val();
        _sell_price = new Number($('input[name=sell_price]').val()).toFixed(2);
        _market_price = new Number($('input[name=market_price]').val()).toFixed(2);
        _cost_price = new Number($('input[name=cost_price]').val()).toFixed(2);
        _stock = $('input[name=stock]').val();
        _score = $('input[name=score]').val();
        _is_new = Boolean($('input[name=is_new]')[0].checked);
        _is_hot = Boolean($('input[name=is_hot]')[0].checked);
        _is_recommend = Boolean($('input[name=is_recommend]')[0].checked);
        _is_onshelf = Boolean($('input[name=is_onshelf]')[0].checked);
        _detail = $('textarea[name=detail]').val();

        _attr_values = new Array();
        for(i=1;i<$("#attrs-table tr").length;i++){
            attr_name = $($($("#attrs-table tr")[i]).find('td')[0]).text();
            attr_value = $($($("#attrs-table tr")[i]).find('td')[1]).find('input').val();
            if(isNull(attr_value)){
                layer.msg('相关属性值不能为空');
                return false;
            }
            _attr_values.push({'attr_name':attr_name,'attr_value':attr_value});
        }

        _album = new Array();
        for(i=0;i<$("#gallery img").length;i++){
            img_url = $($("#gallery img")[i]).attr('src');
            _album.push(img_url);
        }

        _json_data = {
            'id':_id,
            'title':_title,
            'item_no':_item_no,
            'img':_img,
            'cat_id':_cat_id,
            'brand_id':_brand_id,
            'description':_description,
            'keywords':_keywords,
            'services':_services,
            'sell_price':_sell_price,
            'market_price':_market_price,
            'cost_price':_cost_price,
            'stock':_stock,
            'score':_score,
            'is_new':_is_new,
            'is_hot':_is_hot,
            'is_recommend':_is_recommend,
            'is_onshelf':_is_onshelf,
            'detail':_detail,
            'attr_values':_attr_values,
            'album':_album.toString()
        };
console.log(_json_data);
        if(
            isNull(_title) ||
            isNull(_item_no) ||
            isNull(_img) ||
            isNull(_cat_id) ||
            isNull(_brand_id) ||
            isNull(_sell_price) ||
            isNull(_stock) ||
            isNull(_album)
        ){
            layer.msg('必填项不完整',function () {});
            return false;
        }

        $.ajax({
            url: "/Goods/edit.html",
            type: 'POST',
            dataType:"json",
            data: _json_data,
            success : function(data) {
                if (data.code == 1) {
                    layer_close();
                } else {
                    layer.msg(data.msg);
                }
            }
        });

    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
